<template>
  <div class="plotVector-container"></div>
</template>

<script>
import axios from 'axios'
import Polygon from 'ol/geom/Polygon'
import { Fill, Stroke, Style, Text } from 'ol/style'
import LineString from 'ol/geom/LineString'
import Point from 'ol/geom/Point'
import Feature from 'ol/Feature'
import * as turf from '@turf/turf'
import * as olProj from 'ol/proj' // 坐标变换使用

export default {
  data () {
    return {
      pMap: null,
      svgData: null, // 选择icon的svg数据（用于绘制）
      svgCoords: [], // 用来保存由svg解析出来的 元素和标点
      FeatureParts: [], // 绘制军标的组成部分{type: 'FeatureCollection',  features: [*****]}
      gStyle: null, // svg分组后的样式信息
      mapUnit: [500, 500], // 单位为米 [1000, 1000]
      svgSize: { width: 85.04, height: 85.573 } // 单位为像素  ，48
    }
  },
  // watch: {
  // },
  mounted () {
  },
  // computed: {
  // },
  methods: {
    // 实现类似生成器; 创建一个数字数组，从开始到结束（但不包括结束）
    // let range = (start, end) => new Array(end - start).fill(start).map((el, i) => start + i);
    range (start, end) {
      return new Array(end - start).fill(start).map((el, i) => start + i)
    },

    // 休眠-sleep -- 本地方法，暂未使用
    sleep (ms) {
      return new Promise(resolve => setTimeout(resolve, ms))
    },

    // 选择军标样式(从样式列表中获取svg样式，通过id获取对应的数据，异步的需要等待数据完成)
    getPlotData (plotID) {
      // return new Promise(function(resolve){
      // axios.get('/mapres/plot/used/' + plotID + '.svg').then((res) => {
      //   this.svgData = res
      //   resolve(res)
      // })
      // })
      axios.get('/mapres/plot/used/' + plotID + '.svg').then((res) => {
        this.svgData = res
      })
    },
    getPlotDataEx (plotID) {
      return new Promise(function (resolve) {
        axios.get('/mapres/plot/used/' + plotID + '.svg').then((res) => {
          resolve(res)
        })
      })
    },
    // 清空调入的SVG军标数据
    clearPlotData () {
      this.svgData = null
    },

    /* Method：groupStyle
    * 组样式信息补全；如果军标是由组构成的，其成员样式将保存在组<g>标签中；需要写入组中每个元素
    * 参数：tagData：组中的绘制元素，gStyle分组样式
    * 注意：只将信息补全，不替换用户设置颜色；颜色后续更改
    */
    groupStyle (tagData, gStyle = this.gStyle) {
      // 设置填充色
      if (!tagData.getAttribute('fill')) {
        if (this.gStyle) {
          if (this.gStyle.fill === 'none') {
            tagData.setAttribute('fill', 'none')
          } else {
            tagData.setAttribute('fill', this.gStyle.fill)
          }
        }
      }
      // 设置边色
      if (!tagData.getAttribute('stroke')) {
        if (this.gStyle) {
          // tagData.setAttribute('stroke', this.$parent.currColor)
          tagData.setAttribute('stroke', this.gStyle.stroke)
        }
      }
      // 设置边宽
      if (!tagData.getAttribute('stroke-width')) {
        if (this.gStyle) {
          tagData.setAttribute('stroke-width', gStyle['stroke-width'])
        }
      }
    },
    groupStyle_old (tagData, gStyle = this.gStyle) {
      // console.log(this.gStyle)
      // console.log(tagData)
      if (this.gStyle) {
        if (!tagData.getAttribute('fill')) {
          tagData.setAttribute('fill', gStyle.fill)
        }
        if (!tagData.getAttribute('stroke')) {
          tagData.setAttribute('stroke', gStyle.stroke)
        }
        if (!tagData.getAttribute('stroke-width')) {
          tagData.setAttribute('stroke-width', gStyle['stroke-width'])
        }
      }
    },
    groupStyle_old2 (tagData, gStyle = this.gStyle) {
      // 需要设置自定义的颜色
      // if (this.gStyle) {
      //   if (!tagData.getAttribute('fill')) {
      //     tagData.setAttribute('fill', gStyle.fill)
      //   }
      //   if (!tagData.getAttribute('stroke')) {
      //     tagData.setAttribute('stroke', gStyle.stroke)
      //   }
      //   if (!tagData.getAttribute('stroke-width')) {
      //     tagData.setAttribute('stroke-width', gStyle['stroke-width'])
      //   }
      // }
      // 设置填充色
      if (!tagData.getAttribute('fill') || tagData.getAttribute('fill') === 'none') {
        if (this.gStyle) {
          if (this.gStyle.fill === 'none') {
            tagData.setAttribute('fill', 'none')
          } else {
            tagData.setAttribute('fill', this.$parent.currColor)
          }
        }
      } else if (tagData.getAttribute('fill') !== '#004098') {
        tagData.setAttribute('fill', this.$parent.currColor)
      }
      // 设置边色
      if (!tagData.getAttribute('stroke')) {
        tagData.setAttribute('stroke', this.$parent.currColor)
      } else if (tagData.getAttribute('stroke') !== '#004098') {
        tagData.setAttribute('stroke', this.$parent.currColor)
      }
      // 设置边宽
      if (!tagData.getAttribute('stroke-width')) {
        if (this.gStyle) {
          tagData.setAttribute('stroke-width', gStyle['stroke-width'])
        }
      }
    },
    /* Method： pathToCoords
    * 将路径转变成坐标点
    * 参数：path路径 scale缩放因子 numPoints分段数量, translateX左上角坐标, translateY左上角坐标, cp中心点, rotate旋转弧度
    * 返回：组成svg的点信息（）
    */
    pathToCoords (path, scale, numPoints, translateX, translateY, cp, rotate = 0) {
      const length = path.getTotalLength() // 获取路径总长度
      // console.log(cp, rotate)
      // 创建一个指定长度的数组 getRange (numPoints圆和椭圆 16)
      const getRange = this.range(0, numPoints + 1) // 加一是为了获取到最有一个位置[0,5+1]-> i/numPoints=1
      // coords
      let coords = null
      if (rotate !== 0) {
        coords = getRange.map(function (i) {
          // 取路径上的点坐标（屏幕坐标）
          const point = path.getPointAtLength(length * i / numPoints)
          // console.log(point)
          // 首先将坐标移动到原点（当前点+左上角位置）
          const x = (point.x * scale + translateX) - cp[0] // cp.x
          const y = (point.y * scale + translateY) - cp[1] // cp.y
          const r = Math.sqrt((x) * (x) + (y) * (y))
          let rad = 0
          if (x >= 0) {
            rad = Math.asin(y / r)
          } else {
            rad = Math.PI - Math.asin(y / r)
          }
          if (r === 0) return [0, 0]
          // 进行旋转操作
          const rx = r * Math.cos(rad + rotate)
          const ry = r * Math.sin(rad + rotate)
          const fx = rx + cp[0] // cp.x
          const fy = ry + cp[1] // cp.y
          return [fx, fy]
        })
      } else {
        coords = getRange.map(function (i) {
          const point = path.getPointAtLength(length * i / numPoints)
          // console.log(point)
          return [point.x * scale + translateX, point.y * scale + translateY]
        })
      }
      // console.log(coords)
      // console.log(coords)
      this.groupStyle(path) // 组样式补全
      this.svgCoords.push({ path, coords })
    },
    /* Method： circleToCoords
    * 将圆形转变成坐标点
    * 参数：circle：svg圆数据；scale：缩放, numPoints：点数, translateX, translateY：左上点位置
    * 返回：组成svg的点信息（）
    */
    circleToCoords (circle, scale, numPoints, translateX, translateY, cp, rotate = 0) {
      // 弧度 = 2*PI/360*角度
      // const aRadian = 2 * Math.PI / 360 * 360 / numPoints // 角的弧度
      const aRadian = 2 * Math.PI / numPoints // 角的弧度
      const cx = parseFloat(circle.getAttribute('cx')) * scale
      const cy = parseFloat(circle.getAttribute('cy')) * scale
      const r = parseFloat(circle.getAttribute('r')) * scale
      // console.log(typeof aRadian, typeof cx, typeof cy, typeof r)
      // console.log(aRadian, cx, cy, r)
      const getRange = this.range(0, numPoints + 1) // 多加一个点首末坐标相同封口
      let x1 = 0.0// 圆上坐标点x
      let y1 = 0.0// 圆上坐标点y
      // for (let i = 0; i < numPoints; i++) {
      //   x1 = cx + r * Math.cos(aRadian)
      //   y1 = cy + r * Math.sin(aRadian)
      // }
      let coords = null
      // 根据获取的圆心和半径，计算圆上的坐标点(已经计算缩放)
      const points = getRange.map(function (i) {
        x1 = cx + r * Math.cos(aRadian * i)
        y1 = cy + r * Math.sin(aRadian * i)
        // console.log(typeof x1, typeof y1)
        return [x1 + translateX, y1 + translateY]
      })
      points[numPoints] = points[0] // 圆形周长上点封闭
      // 旋转计算
      if (rotate !== 0) {
        coords = points.map(function (p) {
          const x = p[0] - cp[0] // cp.x
          const y = p[1] - cp[1] // cp.y
          const r = Math.sqrt((x) * (x) + (y) * (y))
          let rad = 0
          if (x >= 0) {
            rad = Math.asin(y / r)
          } else {
            rad = Math.PI - Math.asin(y / r)
          }
          if (r === 0) return [0, 0]
          // 进行旋转操作
          const rx = r * Math.cos(rad + rotate)
          const ry = r * Math.sin(rad + rotate)
          const fx = rx + cp[0] // cp.x
          const fy = ry + cp[1] // cp.y
          return [fx, fy]
        })
      } else {
        coords = points
      }
      // let path = { type: 'circle', id: 'circle0001', desc: '测试数据' }
      if (scale !== 1) {
        if (circle.getAttribute('stroke-width')) {
          let lineWidth = parseInt(circle.getAttribute('stroke-width')) * scale
          if (lineWidth < 2) lineWidth = 2
          circle.setAttribute('stroke-width', String(lineWidth))
        }
      }
      // this.svgCoords.push({ path, coords })
      this.groupStyle(circle) // 组样式补全
      const path = circle
      this.svgCoords.push({ path, coords })
    },
    /* Method： circleToCoords
    * 将椭圆转变成坐标点
    * 参数：ellipse：svg椭圆数据；scale：缩放, numPoints：点数, translateX, translateY：左上点位置
    * 返回：组成svg的点信息（）
    */
    ellipseToCoords (ellipse, scale, numPoints, translateX, translateY, cp, rotate = 0) {
      // 弧度 = 2*PI/360*角度
      // const aRadian = 2 * Math.PI / 360 * 360 / numPoints // 角的弧度
      const aRadian = 2 * Math.PI / numPoints // 角的弧度
      const cx = parseFloat(ellipse.getAttribute('cx')) * scale
      const cy = parseFloat(ellipse.getAttribute('cy')) * scale
      const rx = parseFloat(ellipse.getAttribute('rx')) * scale
      const ry = parseFloat(ellipse.getAttribute('ry')) * scale
      // console.log(typeof aRadian, typeof cx, typeof cy, typeof r)
      // console.log(aRadian, cx, cy, rx, ry)
      const getRange = this.range(0, numPoints + 1) // 多加一个点首末坐标相同封口
      let x1 = 0.0// 椭圆上坐标点x
      let y1 = 0.0// 椭圆上坐标点y
      // 椭圆周长上的点
      let coords = null
      // 椭圆公式(根据公式获得椭圆上点坐标)
      const points = getRange.map(function (i) {
        x1 = cx + rx * Math.cos(aRadian * i)
        y1 = cy + ry * Math.sin(aRadian * i)
        // console.log(typeof x1, typeof y1)
        return [x1 + translateX, y1 + translateY]
      })
      points[numPoints] = points[0] // 椭圆周长上点封闭
      // 旋转计算
      if (rotate !== 0) {
        coords = points.map(function (p) {
          const x = p[0] - cp[0] // cp.x
          const y = p[1] - cp[1] // cp.y
          const r = Math.sqrt((x) * (x) + (y) * (y))
          let rad = 0
          if (x >= 0) {
            rad = Math.asin(y / r)
          } else {
            rad = Math.PI - Math.asin(y / r)
          }
          if (r === 0) return [0, 0]
          // 进行旋转操作
          const rx = r * Math.cos(rad + rotate)
          const ry = r * Math.sin(rad + rotate)
          const fx = rx + cp[0] // cp.x
          const fy = ry + cp[1] // cp.y
          return [fx, fy]
        })
      } else {
        coords = points
      }
      // let path = { type: 'circle', id: 'circle0001', desc: '测试数据' }
      if (scale !== 1) {
        if (ellipse.getAttribute('stroke-width')) {
          let lineWidth = parseInt(ellipse.getAttribute('stroke-width')) * scale
          if (lineWidth < 2) lineWidth = 2
          ellipse.setAttribute('stroke-width', String(lineWidth))
        }
      }
      // this.svgCoords.push({ path, coords })
      this.groupStyle(ellipse) // 组样式补全
      const path = ellipse
      this.svgCoords.push({ path, coords })
    },
    /* Method： polylineToCoords
    * 将多边形线转变成坐标点
    * 参数：polyline：svg多边线数据；scale：缩放, translateX, translateY：左上点位置
    * 返回：组成svg的点信息（）
    */
    polylineToCoords_old (polyline, scale, translateX, translateY) {
      // 获取多边形线的节点
      const pointStr = polyline.getAttribute('points')
      const pointsLs = pointStr.split(' ')
      // console.log(pointStr, pointsLs)
      const points = pointsLs.map(function (coord) {
        const coordStr = coord.split(',')
        return [parseFloat(coordStr[0]), parseFloat(coordStr[1])]
      })
      // console.log(points)
      let coords = null
      if (scale !== 1) {
        coords = points.map(function (p) {
          return [p[0] * scale + translateX, p[1] * scale + translateY]
        })
        // console.log(coords)
        // if (polyline.getAttribute('stroke-width')) {
        //   let lineWidth = parseInt(polyline.getAttribute('stroke-width')) * scale
        //   if (lineWidth < 2) lineWidth = 2
        //   polyline.setAttribute('stroke-width', String(lineWidth))
        // }
      } else {
        coords = points.map(function (p) {
          return [p[0] + translateX, p[1] + translateY]
        })
      }
      // // this.svgCoords.push({ path, coords })
      this.groupStyle(polyline) // 组样式补全
      const path = polyline
      this.svgCoords.push({ path, coords })
    },
    polylineToCoords (polyline, scale, translateX, translateY, cp, rotate = 0) {
      // 获取多边形线的节点
      const pointStr = polyline.getAttribute('points')
      const pointsLs = pointStr.split(' ')
      // console.log(pointStr, pointsLs)
      const points = pointsLs.map(function (coord) {
        const coordStr = coord.split(',')
        return [parseFloat(coordStr[0]), parseFloat(coordStr[1])]
      })
      // console.log(points)
      let coords = null
      if (rotate !== 0) {
        coords = points.map(function (p) {
          // let x = (p[0] - cp.x) * scale
          // let y = (p[0] - cp.y) * scale
          const x = (p[0] * scale + translateX) - cp[0] // cp.x
          const y = (p[1] * scale + translateY) - cp[1] // cp.y
          const r = Math.sqrt((x) * (x) + (y) * (y))
          let rad = 0
          if (x >= 0) {
            rad = Math.asin(y / r)
          } else {
            rad = Math.PI - Math.asin(y / r)
          }
          if (r === 0) return [0, 0]
          // console.log(x, y, r, rad)
          // let rad = Math.atan2(y, x)
          // let rx = r * Math.cos(rad + Math.PI / 180 * rotate)
          // let ry = r * Math.sin(rad + Math.PI / 180 * rotate)
          const rx = r * Math.cos(rad + rotate)
          const ry = r * Math.sin(rad + rotate)
          const fx = rx + cp[0] // cp.x
          const fy = ry + cp[1] // cp.y
          return [fx, fy]
        })
        // 没有旋转
      } else {
        coords = points.map(function (p) {
          // return [p[0] + translateX, p[1] + translateY]
          return [p[0] * scale + translateX, p[1] * scale + translateY]
        })
      }
      // // this.svgCoords.push({ path, coords })
      this.groupStyle(polyline) // 组样式补全
      const path = polyline
      this.svgCoords.push({ path, coords })
    },
    /* Method： polygonToCoords
    * 将多边形线转变成坐标点
    * 参数：polygon：svg多边形数据；scale：缩放, translateX, translateY：左上点位置
    * 返回：组成svg的点信息（）
    */
    polygonToCoords (polygon, scale, translateX, translateY, cp, rotate = 0) {
      // 获取多边形线的节点
      const pointStr = polygon.getAttribute('points')
      const pointsLs = pointStr.split(' ')
      // 获取每个坐标点的值
      const points = pointsLs.map(function (coord) {
        const coordStr = coord.split(',')
        return [parseFloat(coordStr[0]), parseFloat(coordStr[1])]
      })
      // console.log(points)
      let coords = null
      if (rotate !== 0) {
        // coords = points.map(function (p) {
        coords = points.map((p) => {
          // let x = (p[0] - cp.x) * scale
          // let y = (p[0] - cp.y) * scale
          // 首先将坐标移动到原点（当前点+左上角位置）- 原点坐标
          const x = (p[0] * scale + translateX) - cp[0] // .x
          const y = (p[1] * scale + translateY) - cp[1] // .y
          const r = Math.sqrt((x) * (x) + (y) * (y))
          let rad = 0
          if (x >= 0) {
            rad = Math.asin(y / r)
          } else {
            rad = Math.PI - Math.asin(y / r)
          }
          if (r === 0) return [0, 0]
          // let rad = Math.atan2(y, x)
          // let rx = r * Math.cos(rad + Math.PI / 180 * rotate)
          // let ry = r * Math.sin(rad + Math.PI / 180 * rotate)
          // 进行旋转操作
          const rx = r * Math.cos(rad + rotate)
          const ry = r * Math.sin(rad + rotate)
          // let fx = rx + cp.x
          // let fy = ry + cp.y
          const fx = rx + cp[0]
          const fy = ry + cp[1]
          return [fx, fy]
        })
      } else { // 没有旋转
        coords = points.map(function (p) {
          // return [p[0] + translateX, p[1] + translateY]
          return [p[0] * scale + translateX, p[1] * scale + translateY]
        })
      }
      /*
      if (scale !== 1) {
        coords = pointsLs.map(function (coord) {
          let coordStr = coord.split(',')
          return [parseFloat(coordStr[0]) * scale + translateX, parseFloat(coordStr[1]) * scale + translateY]
        })
        // console.log(coords)
        // if (polyline.getAttribute('stroke-width')) {
        //   let lineWidth = parseInt(polyline.getAttribute('stroke-width')) * scale
        //   if (lineWidth < 2) lineWidth = 2
        //   polyline.setAttribute('stroke-width', String(lineWidth))
        // }
      } else {
        coords = pointsLs.map(function (coord) {
          let coordStr = coord.split(',')
          return [parseFloat(coordStr[0]) + translateX, parseFloat(coordStr[1]) + translateY]
        })
      } */
      // try...catch
      if (coords.length > 0) {
        coords.push(coords[0])
        this.groupStyle(polygon) // 组样式补全
        const path = polygon
        this.svgCoords.push({ path, coords })
      }
    },

    /* Method：rectToCoords
    * 将矩形线转变成坐标点
    * 参数：rect：svg矩形数据；scale：缩放, translateX, translateY：左上点位置
    * 返回：组成svg的点信息（）
    */
    rectToCoords (rect, scale, translateX, translateY, cp, rotate = 0) {
      // 获取多边形线的节点
      const x = parseFloat(rect.getAttribute('x')) // 左上角坐标x
      const y = parseFloat(rect.getAttribute('y')) // 左上角坐标y
      const w = parseFloat(rect.getAttribute('width')) // 矩形宽
      const h = parseFloat(rect.getAttribute('height')) // 矩形高
      // 保存矩形坐标数组
      let coords = null
      // 计算各个点的坐标
      const points = []
      points.push([x * scale + translateX, y * scale + translateY])
      points.push([(x + w) * scale + translateX, y * scale + translateY])
      points.push([(x + w) * scale + translateX, (y + h) * scale + translateY])
      points.push([x * scale + translateX, (y + h) * scale + translateY])
      points.push(points[0]) // 矩形上点封闭
      // 处理旋转
      if (rotate !== 0) {
        coords = points.map(function (p) {
          // 首先将坐标移动到原点（当前点+左上角位置）- 原点坐标
          const x = p[0] - cp[0] // .x
          const y = p[1] - cp[1] // cp.y
          const r = Math.sqrt((x) * (x) + (y) * (y))
          let rad = 0
          if (x >= 0) {
            rad = Math.asin(y / r)
          } else {
            rad = Math.PI - Math.asin(y / r)
          }
          if (r === 0) return [0, 0]
          // console.log(x, y, r, rad)
          // let rad = Math.atan2(y, x)
          // let rx = r * Math.cos(rad + Math.PI / 180 * rotate)
          // let ry = r * Math.sin(rad + Math.PI / 180 * rotate)
          // 进行旋转操作
          const rx = r * Math.cos(rad + rotate)
          const ry = r * Math.sin(rad + rotate)
          const fx = rx + cp[0] // cp.x
          const fy = ry + cp[1] // cp.y
          return [fx, fy]
        })
      } else { // 没有旋转
        coords = points
      }
      // 数据保存rect
      this.groupStyle(rect) // 组样式补全
      const path = rect
      this.svgCoords.push({ path, coords })
    },
    /* Method：lineToCoords
    * 将线段转变成坐标点
    * 参数：line：svg线段数据；scale：缩放, translateX, translateY：左上点位置
    * 返回：组成svg的点信息（）
    */
    lineToCoords (line, scale, translateX, translateY, cp, rotate = 0) {
      // 获取多边形线的节点
      const x1 = parseFloat(line.getAttribute('x1')) // 左上角坐标x
      const y1 = parseFloat(line.getAttribute('y1')) // 左上角坐标y
      const x2 = parseFloat(line.getAttribute('x2')) // 矩形宽
      const y2 = parseFloat(line.getAttribute('y2')) // 矩形高
      // 保存线端点坐标数组
      let coords = null
      // 计算各个点的坐标
      const points = []
      points.push([x1 * scale + translateX, y1 * scale + translateY])
      points.push([x2 * scale + translateX, y2 * scale + translateY])
      // 处理旋转
      if (rotate !== 0) {
        coords = points.map(function (p) {
          // 首先将坐标移动到原点（当前点+左上角位置）- 原点坐标
          const x = p[0] - cp[0] // cp.x
          const y = p[1] - cp[1] // cp.y
          const r = Math.sqrt((x) * (x) + (y) * (y))
          let rad = 0
          if (x >= 0) {
            rad = Math.asin(y / r)
          } else {
            rad = Math.PI - Math.asin(y / r)
          }
          if (r === 0) return [0, 0]
          // console.log(x, y, r, rad)
          // let rad = Math.atan2(y, x)
          // let rx = r * Math.cos(rad + Math.PI / 180 * rotate)
          // let ry = r * Math.sin(rad + Math.PI / 180 * rotate)
          // 进行旋转操作
          const rx = r * Math.cos(rad + rotate)
          const ry = r * Math.sin(rad + rotate)
          const fx = rx + cp[0] // cp.x
          const fy = ry + cp[1] // cp.y
          return [fx, fy]
        })
      } else { // 没有旋转
        coords = points
      }
      // 数据保存
      this.groupStyle(line) // 组样式补全
      const path = line
      this.svgCoords.push({ path, coords })
    },
    /* Method：textToCoords
    * 文字信息添加
    * 参数：line：svg文字数据；scale：缩放, translateX, translateY：左上点位置
    * 返回：组成svg的点信息（）
    */
    textToCoords_old (txt, scale, translateX, translateY) {
      // console.log(txt, scale, translateX, translateY)
      // 获取文字transform
      const txtMatrix = txt.getAttribute('transform')
      // let iRegex = /\((.+?)\)/g // () 小括号
      const s = txtMatrix.indexOf('(')
      const strArr = txtMatrix.substring(s + 1, txtMatrix.length - 1).split(' ')
      // let iMatrix = strArr.map(Number) // edge浏览器 不支持Number ?????
      const iMatrix = strArr.map(function (m) {
        return parseFloat(m)
      })
      const len = iMatrix.length
      // console.log('debug: ', iMatrix)
      const x = iMatrix[len - 2]
      const y = iMatrix[len - 1]
      // 计算各个点的坐标
      const coords = []
      coords.push([x * scale + translateX, y * scale + translateY])
      // 文字处理中，添加缩放和旋转因子在coords数组 [scale, 0-待定]
      coords.push([scale, 0])
      // // 数据保存
      const path = txt
      this.svgCoords.push({ path, coords })
    },
    textToCoords (txt, scale, translateX, translateY, cp, rotate = 0) {
      // console.log(txt, scale, translateX, translateY)
      // 获取文字transform
      const txtMatrix = txt.getAttribute('transform')
      // let iRegex = /\((.+?)\)/g // () 小括号
      const s = txtMatrix.indexOf('(')
      const strArr = txtMatrix.substring(s + 1, txtMatrix.length - 1).split(' ')
      // let iMatrix = strArr.map(Number) // edge浏览器 不支持Number ?????
      const iMatrix = strArr.map(function (m) {
        return parseFloat(m)
      })
      const len = iMatrix.length
      // console.log('debug: ', iMatrix)
      const x = iMatrix[len - 2]
      const y = iMatrix[len - 1]
      // 计算各个点的坐标
      let coords = null
      const points = []
      points.push([x * scale + translateX, y * scale + translateY])
      // 文字处理中，添加缩放和旋转因子在coords数组 [scale, 0-待定]
      if (rotate !== 0) {
        coords = points.map(function (p) {
          // 首先将坐标移动到原点（当前点+左上角位置）- 原点坐标
          const x = p[0] - cp[0] // cp.x
          const y = p[1] - cp[1] // cp.y
          const r = Math.sqrt((x) * (x) + (y) * (y))
          let rad = 0
          if (x >= 0) {
            rad = Math.asin(y / r)
          } else {
            rad = Math.PI - Math.asin(y / r)
          }
          if (r === 0) return [0, 0]
          // console.log(x, y, r, rad)
          // let rad = Math.atan2(y, x)
          // let rx = r * Math.cos(rad + Math.PI / 180 * rotate)
          // let ry = r * Math.sin(rad + Math.PI / 180 * rotate)
          // 进行旋转操作
          const rx = r * Math.cos(rad + rotate)
          const ry = r * Math.sin(rad + rotate)
          const fx = rx + cp[0] // cp.x
          const fy = ry + cp[1] // cp.y
          return [fx, fy]
        })
      } else { // 没有旋转
        coords = points
      }
      console.log(scale, rotate)
      coords.push([scale, rotate])
      // console.log(coords, cp)
      // // 数据保存
      const path = txt
      this.svgCoords.push({ path, coords })
    },
    /* Method： calculateCoords(svg) {参数是记录svg数据的元素div；获取绘制范围的左上角坐标}
    * 解析SVG信息，将SVG信息解析成 屏幕坐标点信息 返回
    * 参数：iPath ：SVG格式的信息
    * 返回：组成svg的点信息（）
    */
    calculateCoords (cp, svg, scale = 1, cPoint) {
      // console.log(cp, svg, scale, cPoint)
      // const { x, y } = cp // 地理坐标
      const x = cp[0]
      const y = cp[1]
      // 尝试两种方法来获取SVG元素的宽度/高度值,在地图上返回合理的x/y坐标。
      let { width, height } = svg.getBBox() // viewBox="0 0 200 200">
      if (width === 0 && svg.getAttribute('width')) {
        width = parseInt(svg.getAttribute('width'), 10) // 十进制获取元素的宽
      }
      if (height === 0 && svg.getAttribute('height')) {
        height = parseInt(svg.getAttribute('height'), 10)
      }
      // console.log(width, height)

      // ['CP', 'TL', 'TM', 'TR', 'LM', 'RM', 'BL', 'BM', 'BR']
      switch (cPoint) {
        case 'CP':
          return {
            x: x - (width * scale / 2),
            y: y - (height * scale / 2)
          }
        // break
        case 'TL':
          return {
            x: x,
            y: y
          }
        // break
        case 'TM':
          return {
            x: x - (width * scale / 2),
            y: y
          }
        // break
        case 'TR':
          return {
            x: x - (width * scale),
            y: y
          }
        // break
        case 'LM':
          return {
            x: x,
            y: y - (height * scale / 2)
          }
        // break
        case 'RM':
          return {
            x: x - (width * scale),
            y: y - (height * scale / 2)
          }
        // break
        case 'BL':
          return {
            x: x,
            y: y - (height * scale)
          }
        // break
        case 'BM':
          return {
            x: x - (width * scale / 2),
            y: y - (height * scale)
          }
        // break
        case 'BR':
          return {
            x: x - (width * scale),
            y: y - (height * scale)
          }
        // break
        default:
          return {
            x: x - (width * scale / 2),
            y: y - (height * scale / 2)
          }
      }
    },

    /* Method：getSecondCoord 注：需要使用地理坐标，注意调用位置！
    * 提供给icon军标获取第二个控制点坐标，根据基本点生成; ['CP', 'TL', 'TM', 'TR', 'LM', 'RM', 'BL', 'BM', 'BR']
    * 参数：iconPlot-当前绘制的军标数据信息
    */
    getSecondCoord (iconPlot) {
      if (!iconPlot) return
      const chkArr = ['CP', 'TL', 'TM', 'TR', 'LM', 'RM', 'BL', 'BM', 'BR'] // 校验数据；验证basePoint是否有效
      const iPlotID = iconPlot.name
      let cp = iconPlot.cp[0]
      // console.log(cp)
      const geoUnit = iconPlot.unit
      let basePoint = null
      // console.log(iPlotID, cp, geoUnit)
      const paramArr = iPlotID.split('_') // 将icon军标的名称分解成数组[icon，cp，plotCode]
      // console.log(paramArr)
      if (paramArr.length > 2) { // 有三个以上元素时，使用第二个元素为中心点；出现多于元素--编号中有“下划线”
        basePoint = paramArr[1].toUpperCase()
        // console.log(paramArr[0], paramArr[1], paramArr[2])
      } else if (paramArr.length === 2) { // 文件名称中不包含中心点位置；使用默认值CP
        // console.log(paramArr[0], paramArr[1])
        basePoint = 'CP'
      } else if (paramArr.length === 1) { // 只有一个文件名称是，使用CP
        // console.log(paramArr[0])
        basePoint = 'CP'
      } else {
        // 没有数据时返回
        return
      }
      // basePoint校验
      if (chkArr.indexOf(basePoint) === -1) {
        basePoint = 'CP'
      }

      // 这里的cp是需要epsg3857的，否则不能通过下面方式计算另一个控制点
      const sRCS = this.$parent.iMap.getView().getProjection().getCode()
      if (sRCS !== 'EPSG:3857') {
        cp = olProj.transform(cp, sRCS, 'EPSG:3857')
      }
      let secPnt

      // 根据中心点的不同，生成第二控制点
      // ['CP', 'TL', 'TM', 'TR', 'LM', 'RM', 'BL', 'BM', 'BR']
      // switch (basePoint) {
      //   case 'CP':
      //     // 中心对应的控制点是左下角
      //     return {
      //       x: cp[0] + (geoUnit[0] * 2), //  / 2
      //       y: cp[1] - (geoUnit[1] * 2) //  / 2
      //     }
      //     // break
      //   case 'TL':
      //     return {
      //       x: cp[0] + geoUnit[0] * 2,
      //       y: cp[1] - geoUnit[1] * 2
      //     }
      //     // break
      //   case 'TM':
      //     return {
      //       x: cp[0],
      //       y: cp[1] - geoUnit[1] * 2
      //     }
      //     // break
      //   case 'TR':
      //     return {
      //       x: cp[0] - geoUnit[0] * 2,
      //       y: cp[1] - geoUnit[1] * 2
      //     }
      //     // break
      //   case 'LM':
      //     return {
      //       x: cp[0] + geoUnit[0] * 2,
      //       y: cp[1]
      //     }
      //     // break
      //   case 'RM':
      //     return {
      //       x: cp[0] - geoUnit[0] * 2,
      //       y: cp[1]
      //     }
      //     // break
      //   case 'BL':
      //     return {
      //       x: cp[0] + geoUnit[0] * 2,
      //       y: cp[1] + geoUnit[1] * 2
      //     }
      //     // break
      //   case 'BM':
      //     return {
      //       x: cp[0],
      //       y: cp[1] + geoUnit[1] * 2
      //     }
      //     // break
      //   case 'BR':
      //     return {
      //       x: cp[0] - geoUnit[0] * 2,
      //       y: cp[1] + geoUnit[1] * 2
      //     }
      //     // break
      //   default:
      //     return {
      //       x: cp[0] + (geoUnit[0]), // / 2
      //       y: cp[1] + (geoUnit[1]) //  / 2
      //     }
      // }
      switch (basePoint) {
        case 'CP':
          // 中心对应的控制点是左下角
          secPnt = [cp[0] + (geoUnit[0] * 2), cp[1] - (geoUnit[1] * 2)]
          break
        case 'TL':
          secPnt = [cp[0] + geoUnit[0] * 2, cp[1] - geoUnit[1] * 2]
          break
        case 'TM':
          secPnt = [cp[0], cp[1] - geoUnit[1] * 2]
          break
        case 'TR':
          secPnt = [cp[0] - geoUnit[0] * 2, cp[1] - geoUnit[1] * 2]
          break
        case 'LM':
          secPnt = [cp[0] + geoUnit[0] * 2, cp[1]]
          break
        case 'RM':
          secPnt = [cp[0] - geoUnit[0] * 2, cp[1]]
          break
        case 'BL':
          secPnt = [cp[0] + geoUnit[0] * 2, cp[1] + geoUnit[1] * 2]
          break
        case 'BM':
          secPnt = [cp[0], cp[1] + geoUnit[1] * 2]
          break
        case 'BR':
          secPnt = [cp[0] - geoUnit[0] * 2, cp[1] + geoUnit[1] * 2]
          break
        default:
          secPnt = [cp[0] + (geoUnit[0]), cp[1] + (geoUnit[1])]
      }
      if (sRCS !== 'EPSG:3857') {
        secPnt = olProj.transform(secPnt, 'EPSG:3857', sRCS)
      }
      // 返回生成的第二个控制点坐标
      return {
        x: secPnt[0],
        y: secPnt[1]
      }
    },

    // 计算绘制出来的军标图形的图案宽高
    getDrawSize (pointArr) {
      if (pointArr.length < 2) return
      // console.log(pointArr)
      // let w = (Math.abs(pointArr[1].x - pointArr[0].x)) * 2
      // let h = (Math.abs(pointArr[1].y - pointArr[0].y)) * 2
      // let w = (Math.abs(pointArr[1].x - pointArr[0].x))
      // let h = (Math.abs(pointArr[1].y - pointArr[0].y))
      const w = (Math.abs(pointArr[1][0] - pointArr[0][0]))
      const h = (Math.abs(pointArr[1][1] - pointArr[0][1]))
      // console.log(w, h)
      return { width: w, height: h }
      // return [w, h]
    },
    // 通过绘制的控制点来获取图形的宽高-地理坐标反查（暂不使用）
    getDrawSize2 (pointArr) {
      if (pointArr.length < 2) return
      const basePoint = this.$parent.pMap.unproject(pointArr[0])
      const ctrlPoint = this.$parent.pMap.unproject(pointArr[1])
      // console.log(pointArr)
      // let w = (Math.abs(pointArr[1].x - pointArr[0].x)) * 2
      // let h = (Math.abs(pointArr[1].y - pointArr[0].y)) * 2
      const w = (Math.abs(basePoint[1].x - ctrlPoint[0].x))
      const h = (Math.abs(basePoint[1].y - ctrlPoint[0].y))
      // 返回地理坐标
      return { width: w, height: h }
      // return [w, h]
    },
    // 计算缩放因子
    getScaleFactor (drawSize, svg) {
      let { width, height } = svg.getBBox()
      if (width === 0 && svg.getAttribute('width')) {
        width = parseInt(svg.getAttribute('width'), 10) // 十进制获取元素的宽
      }
      if (height === 0 && svg.getAttribute('height')) {
        height = parseInt(svg.getAttribute('height'), 10)
      }
      const scaleX = drawSize.width / width
      const scaleY = drawSize.height / height
      // console.log(scaleX, scaleY)
      // 返回一个比较大的比率因子
      return scaleX > scaleY ? scaleX : scaleY
    },
    // 计算缩放因子--使用地理坐标的方法（暂不使用）
    getScaleFactor_new (cp, drawSize, svg) {
      // console.log(cp)
      const scrCenter = this.$parent.iMap.getPixelFromCoordinate(cp)
      // console.log(scrCenter)
      let { width, height } = svg.getBBox()
      if (width === 0 && svg.getAttribute('width')) {
        width = parseInt(svg.getAttribute('width'), 10) // 十进制获取元素的宽
      }
      if (height === 0 && svg.getAttribute('height')) {
        height = parseInt(svg.getAttribute('height'), 10)
      }
      const lt = [scrCenter[0] - width / 2, scrCenter[1] - height / 2]
      const rb = [scrCenter[0] + width / 2, scrCenter[1] + height / 2]
      // console.log(lt, rb)
      const coordlt = this.$parent.iMap.getCoordinateFromPixel(lt)
      const coordrb = this.$parent.iMap.getCoordinateFromPixel(rb)
      // console.log(coordlt, coordrb)
      const iWidth = (Math.abs(coordlt[0] - coordrb[0]))
      const iHeight = (Math.abs(coordlt[1] - coordrb[1]))
      // console.log(iWidth, iHeight)
      const scaleX = drawSize.width / iWidth
      const scaleY = drawSize.height / iHeight
      // console.log(drawSize.width, iWidth)
      // console.log(scaleX, scaleY)
      // 返回一个比较大的比率因子
      return scaleX > scaleY ? scaleX : scaleY
    },
    // 动态获取缩放因子(plottingLayer中无vgs尺寸)
    // 参数：控制点坐标数组(地理坐标); basePnt 指点位置（如:'CP'） ;svgSize：svg文件的大小({width,height})（设定为宽高一致>）
    // 变更：添加了basePnt
    getRealScale (ctrlPnts, basePnt, svgSize = this.svgSize) {
      if (ctrlPnts.length < 2) return
      const cp1 = this.$parent.iMap.getPixelFromCoordinate(ctrlPnts[0])
      const cp2 = this.$parent.iMap.getPixelFromCoordinate(ctrlPnts[1])
      const w = (Math.abs(cp2[0] - cp1[0]))
      const h = (Math.abs(cp2[1] - cp1[1]))
      const scaleX = w / svgSize.width
      const scaleY = h / svgSize.height
      // 返回一个比较大的比率因子
      if (basePnt === 'CP') {
        return scaleX > scaleY ? scaleX * 2 : scaleY * 2
      } else {
        return scaleX > scaleY ? scaleX : scaleY
      }
    },

    // 获得当前层级军标的缩放比率
    getPlotScale (ctrlPnts, svgSize = this.svgSize, mapUnit = this.mapUnit) {
      if (ctrlPnts.length < 2) return
      const cp1 = ctrlPnts[0] // 重心点，地理坐标
      // 军标没有缩放时，单位距离坐标
      const cp2 = [(cp1[0] + mapUnit[0]), (cp1[1] + mapUnit[1])]

      // 军标根据
      const secCoord1 = this.$parent.iMap.getPixelFromCoordinate(cp1) // 屏幕坐标 重心点坐标
      const secCoord2 = this.$parent.iMap.getPixelFromCoordinate(cp2) // 屏幕坐标 y 方向单位点
      const w = (Math.abs(secCoord2[0] - secCoord1[0]))
      const h = (Math.abs(secCoord2[1] - secCoord1[1]))
      const scaleX = w / svgSize.width
      const scaleY = h / svgSize.height
      // 返回一个比较大的比率因子
      return scaleX > scaleY ? scaleX : scaleY
    },

    // 获取旋转角度
    getRotateFactor (pointArr) {
      if (pointArr.length < 2) return 0
      // let r = Math.sqrt((pointArr[1].x - pointArr[0].x) * (pointArr[1].x - pointArr[0].x) + (pointArr[1].y - pointArr[0].y) * (pointArr[1].y - pointArr[0].y))
      // let rad = 0
      const x1 = pointArr[0][0] // .x
      const y1 = pointArr[0][1] // .y
      const x2 = pointArr[1][0] // .x
      const y2 = pointArr[1][1] // .y
      const rad = Math.atan2((y2 - y1), (x2 - x1)) + Math.PI / 2
      // let rad = Math.atan2(pointArr[1].y, pointArr[1].x)
      // console.log(pointArr[0].x, pointArr[0].y)
      // console.log(x1, y1, x2, y2, rad)
      return rad
    },

    /*  Method：setUnit
    军标单位尺寸设置: 设置军标在地图上映射尺寸 米
    width：宽, height：高
    */
    setUnit (width, height) {
      const iWidth = parseInt(width)
      const iHeight = parseInt(height)
      this.mapUnit[0] = iWidth
      this.mapUnit[1] = iHeight
    },
    getUnit () {
      return this.mapUnit
    },

    /*  Method：setUnit
    * 返回根据地理坐标系获取的大小（宽高）
    * 参数 pointArr：绘制的控制点, basePoint： 中心点位置。 unitSize默认大小 = 1000米) 在地图上默认范围尺寸
    * 根据中心点（原-屏幕坐标）转地理坐标，加绘制地理尺寸后，转屏幕坐标并计算屏幕上长宽尺寸
    */
    getUnitSize (pointArr, basePoint, unitSize = [1000, 1000]) {
      let centerPoint = this.$parent.iMap.getCoordinateFromPixel(pointArr[0])
      const sRCS = this.$parent.iMap.getView().getProjection().getCode()
      let lt // 左上
      let rb // 右下
      let screenlt // 左上屏幕坐标
      let screenrb // 右下屏幕坐标
      if (sRCS !== 'EPSG:3857') {
        // transform(coordinate, source, destination)
        centerPoint = olProj.transform(centerPoint, sRCS, 'EPSG:3857') // 将坐标数据转换成'EPSG:3857'
        lt = [centerPoint[0] - unitSize[0], centerPoint[1] - unitSize[1]]
        rb = [centerPoint[0] + unitSize[0], centerPoint[1] + unitSize[1]]
        lt = olProj.transform(lt, 'EPSG:3857', sRCS)
        rb = olProj.transform(rb, 'EPSG:3857', sRCS)
        screenlt = this.$parent.iMap.getPixelFromCoordinate(lt)
        screenrb = this.$parent.iMap.getPixelFromCoordinate(rb)
      } else {
        // 计算左上，右下坐标点，并且在最后转换成屏幕坐标
        lt = [centerPoint[0] - unitSize[0], centerPoint[1] - unitSize[1]]
        rb = [centerPoint[0] + unitSize[0], centerPoint[1] + unitSize[1]]
        screenlt = this.$parent.iMap.getPixelFromCoordinate(lt)
        screenrb = this.$parent.iMap.getPixelFromCoordinate(rb)
      }

      // console.log(pointArr)
      // 需要坐标转换
      // let centerPoint = this.$parent.iMap.unproject(pointArr[0])
      // let ctrlPoint = this.$parent.pMap.unproject(pointArr[1])
      // console.log(centerPoint)
      // 如果w84坐标装换成3857
      // 获得中心点pt，左上右下
      // let pt = turf.toMercator([centerPoint.lng, centerPoint.lat]) // [-71,41]
      // let lt = [pt[0] - unitSize[0], pt[1] - unitSize[1]]
      // let rb = [pt[0] + unitSize[0], pt[1] + unitSize[1]]
      // console.log(lt, rb)
      // let w84lt = turf.toWgs84(lt)
      // let w84rb = turf.toWgs84(rb)
      // console.log(this.$parent.pMap.project(w84lt))
      // console.log(this.$parent.pMap.project(w84rb))
      // let screenlt = this.$parent.pMap.project(w84lt)
      // let screenrb = this.$parent.pMap.project(w84rb)
      // let lt = [centerPoint[0] - unitSize[0], centerPoint[1] - unitSize[1]]
      // let rb = [centerPoint[0] + unitSize[0], centerPoint[1] + unitSize[1]]
      // let screenlt = this.$parent.iMap.getPixelFromCoordinate(lt)
      // let screenrb = this.$parent.iMap.getPixelFromCoordinate(rb)
      // console.log(screenlt, screenrb)
      // let w = null
      // let h = null
      // switch (basePoint) {
      //   case 'CP':
      //     let l = centerPoint
      //     break
      //   case '':
      //     break
      // }
      const w = (Math.abs(screenlt[0] - screenrb[0]))
      const h = (Math.abs(screenlt[1] - screenrb[1]))
      // let w = (Math.abs(screenlt.x - screenrb.x))
      // let h = (Math.abs(screenlt.y - screenrb.y))
      return { width: w, height: h }
    },
    /* Method：analySVG
    * 解析SVG信息，将SVG信息解析成 屏幕坐标点信息 返回
    * 参数：iPath ：SVG格式的信息
    * 返回：组成svg的点信息（）
    */
    analySVG (iPath) {
      console.log(iPath)
    },
    /* Method：buildFeature
    * 根据分析出来的坐标数据，生成相应的feature
    * 参数：默认使用this.svgCoords
    * 返回：geojson.feature数据；用于替换source绘制图形
    */
    buildFeature (xId, data = this.svgCoords) {
      // 清空之前的this.FeatureParts数据（删除原来绘制的军标）
      if (this.FeatureParts instanceof Array) {
        this.FeatureParts.splice(0, this.FeatureParts.length)
      }

      // console.log(data)
      if (data.length < 1) return // 没有数据时不做处理
      // 循环处理所有解析的数据
      for (let i = 0; i < data.length; i++) {
        // console.log(data[i])
        // let uID = Date.now()
        // data数据包含 {svg的path-原数据，和path上取得坐标}
        const { path, coords } = data[i]
        // console.log(path, coords)

        // 需要区分当前处理数据类型；文字需要特殊处理
        const dataType = path.tagName
        // console.log(dataType)
        // 生成文字处理数据
        if (dataType === 'text') {
          // feature.properties.txtField = path.innerHTML
          // feature.properties.showType = 'txt'
          // if (path.getAttribute('font-family')) {
          //   feature.properties.txtFont = path.getAttribute('font-family')
          // }
          // if (path.getAttribute('font-size')) {
          //   feature.properties.txtSize = path.getAttribute('font-size')
          // }
          // // 还需要文字颜色
          // // temp modify
          // let d = coords[0]
          // // const c = this.$parent.pMap.unproject(d)
          // const c = this.$parent.iMap.getCoordinateFromPixel(d)
          // feature.geometry = {
          //   type: 'Point', // 为了标注文字
          //   coordinates: [c.lng, c.lat]
          //   // coords.map(d => {
          //   //   // 本模块作为功能模块，不保存map对象，直接调用父组件map
          //   //   const c = this.$parent.pMap.unproject(d)
          //   //   return [c.lng, c.lat]
          //   // })

          // }
          console.log('文字处理暂无，下面是ol中处理方法--转到了plottingLayer中处理！')
          const iText = path.innerHTML
          let iFeature = null
          let iStyle = null
          const d = coords[0]
          const c = this.$parent.iMap.getCoordinateFromPixel(d)
          const iPoint = new Point(c[0], c[1])
          iFeature = new Feature(iPoint)
          iFeature.pid = xId
          // 字体样式样式设置
          const iFont = path.getAttribute('font-family')
          const iSize = path.getAttribute('font-size')
          let pFont = 'normal '
          if (iSize) {
            pFont = pFont + iSize + 'px '
          } else {
            pFont = pFont + '14px '
          }
          if (iFont) {
            pFont = pFont + iFont
          } else {
            pFont = pFont + '微软雅黑'
          }
          iStyle = new Style({
            text: new Text({
              // 位置
              textAlign: 'center',
              // 基准线
              textBaseline: 'middle',
              // 文字样式
              font: pFont, // 默认格式 'normal 14px 微软雅黑',
              // 文本内容
              text: iText,
              // 文本填充样式（即文字颜色）
              fill: new Fill({ color: '#000000' }),
              stroke: new Stroke({ color: '#ffcc33', width: 12 })
            })
          })
          // 设置文本样式
          iFeature.setStyle(iStyle)
          // 添加到军标部件中
          this.FeatureParts.push(iFeature)
        } else {
          // console.log(coords)
          let iFeature = null
          let iStyle = null
          // 如果第一个和最后一个坐标一致，视为闭口多边形;没有填充色时，视为多边形线LineString
          if (coords[0][0] === coords[coords.length - 1][0] && coords[0][1] === coords[coords.length - 1][1]) {
            // let geoType = hasFill ? 'Polygon' : 'LineString'
            // if (!hasFill) { // 多边形，无填充色 即表示为描边
            //   feature.properties.showType = 'outline'
            // }
            // feature.geometry = {
            //   type: 'Polygon',
            //   coordinates: [
            //     coords.map(d => {
            //       // 本模块作为功能模块，不保存map对象，直接调用父组件map
            //       const c = this.$parent.pMap.unproject(d)
            //       return [c.lng, c.lat]
            //     })
            //   ]
            // }
            // 创建多边形geom对象
            const iPolygon = new Polygon([coords.map(d => {
              // 本模块作为功能模块，不保存map对象，直接调用父组件map
              const c = this.$parent.iMap.getCoordinateFromPixel(d)
              return [c[0], c[1]]
            })
            ])
            iFeature = new Feature(iPolygon)
            iFeature.pid = xId
            if (path.getAttribute('fill') === 'none' || !path.getAttribute('fill')) { // 没有填充颜色
              const strokeColor = path.getAttribute('stroke')
              if (strokeColor && strokeColor !== '#003F98' && strokeColor !== '#FFF000' && strokeColor !== '#009944') { // 有描边色
                iStyle = new Style({
                  fill: new Fill({
                    color: 'rgba(0,0,0,0)'
                  }),
                  stroke: new Stroke({
                    color: this.$parent.currColor,
                    width: path.getAttribute('stroke-width') ? path.getAttribute('stroke-width') : 2
                  })
                })
              } else if (strokeColor === '#003F98' && strokeColor === '#FFF000' && strokeColor === '#009944') {
                iStyle = new Style({
                  fill: new Fill({
                    color: 'rgba(0,0,0,0)'
                  }),
                  stroke: new Stroke({
                    color: strokeColor,
                    width: path.getAttribute('stroke-width') ? path.getAttribute('stroke-width') : 2
                  })
                })
              }
              // iFeature.setStyle(iStyle)
            }
            iFeature.setStyle(iStyle)
          } else {
            // console.log('else')
            // feature.geometry = {
            //   type: 'LineString',
            //   coordinates: coords.map(d => { // 线样式数据[[116.278075, 40.001157],[116.345, 40.101],[116.5805, 41.091]]
            //     // 本模块作为功能模块，不保存map对象，直接调用父组件map
            //     const c = this.$parent.pMap.unproject(d)
            //     return [c.lng, c.lat]
            //   })
            // }// 创建多边形geom对象new Polygon([coords.map(d => {
            const tmpCoords = coords.map(d => {
              // 本模块作为功能模块，不保存map对象，直接调用父组件map
              const c = this.$parent.iMap.getCoordinateFromPixel(d)
              return [c[0], c[1]]
            })
            // console.log(tmpCoords)
            const iLineString = new LineString(tmpCoords)
            // let iLineString = new LineString(coords.map(d => {
            //   // 本模块作为功能模块，不保存map对象，直接调用父组件map
            //   const c = this.$parent.iMap.getCoordinateFromPixel(d)
            //   return [c[0], c[1]]
            //   })
            // )
            iFeature = new Feature(iLineString)
            iFeature.pid = xId
            const strokeColor = path.getAttribute('stroke')
            if (!strokeColor || strokeColor && strokeColor !== '#003F98' && strokeColor !== '#FFF000' && strokeColor !== '#009944') { // 有描边色
              iStyle = new Style({
                stroke: new Stroke({
                  color: this.$parent.currColor,
                  width: path.getAttribute('stroke-width') ? path.getAttribute('stroke-width') : 2
                })
              })
            } else if (strokeColor === '#003F98' && strokeColor === '#FFF000' && strokeColor === '#009944') {
              iStyle = new Style({
                stroke: new Stroke({
                  color: strokeColor,
                  width: path.getAttribute('stroke-width') ? path.getAttribute('stroke-width') : 2
                })
              })
            }
            iFeature.setStyle(iStyle)
          }
          this.FeatureParts.push(iFeature)
        } // if-else结束
        // this.FeatureParts.push(iFeature)
        // console.log(this.FeatureParts)
      }
    },
    // 备份数据（old）
    buildFeature_bak (data = this.svgCoords) {
      // console.log(data)
      // 清空之前的this.FeatureParts数据（删除原来绘制的军标）
      this.FeatureParts.splice(0, this.FeatureParts.length)
      // console.log(data)
      if (data.length < 1) return // 没有数据是不做处理
      // 循环处理所有解析的数据
      for (let i = 0; i < data.length; i++) {
        // console.log(data[i])
        // let uID = Date.now()
        // data数据包含 {svg的path-原数据，和path上取得坐标}
        const { path, coords } = data[i]
        // 创建数据结构
        const feature = {
          type: 'Feature',
          properties: {},
          geometry: {}
        }
        // 添加属性id信息
        if (path.id) {
          feature.properties.id = path.id
        }
        // 添加属性fill信息
        let hasFill = false // 多边形是否有填充色
        // let hasStroke = true // 是否有描边（有描边色或边宽）
        // 填充色设置
        if (path.getAttribute('fill') === 'none' || !path.getAttribute('fill')) {
          // 如果填充为none或没有填充；并设置线色和线宽
          feature.properties.fill = '#FFF' // 将填充色赋为白色
          feature.properties.opacity = 0 // 透明度设置为透明
        } else {
          feature.properties.fill = path.getAttribute('fill')
          hasFill = true
        }
        // 勾边颜色
        // console.log(path.getAttribute('stroke'))
        if (path.getAttribute('stroke')) {
          feature.properties['line-color'] = path.getAttribute('stroke')
          // hasStroke = true
        }
        // 设置线宽
        // console.log(path.getAttribute('stroke-width'))
        if (path.getAttribute('stroke-width')) {
          feature.properties['line-width'] = parseInt(path.getAttribute('stroke-width'), 10)
          // hasStroke = true
        }
        // console.log(coords)
        // 如果第一个和最后一个坐标一致，视为闭口多边形;没有填充色时，视为多边形线LineString
        if (coords[0][0] === coords[coords.length - 1][0] && coords[0][1] === coords[coords.length - 1][1]) {
          // let geoType = hasFill ? 'Polygon' : 'LineString'
          if (!hasFill) { // 多边形，无填充色 即表示为描边
            feature.properties.showType = 'outline'
          }
          feature.geometry = {
            type: 'Polygon',
            coordinates: [
              coords.map(d => {
                // 本模块作为功能模块，不保存map对象，直接调用父组件map
                const c = this.$parent.pMap.unproject(d)
                return [c.lng, c.lat]
              })
            ]
          }
        } else {
          // console.log('else')
          feature.geometry = {
            type: 'LineString',
            coordinates: coords.map(d => { // 线样式数据[[116.278075, 40.001157],[116.345, 40.101],[116.5805, 41.091]]
              // 本模块作为功能模块，不保存map对象，直接调用父组件map
              const c = this.$parent.pMap.unproject(d)
              return [c.lng, c.lat]
            })
          }
        }
        this.FeatureParts.push(feature)
        // console.log(this.FeatureParts)
      }
    },

    /* Method：buildGeom
    * 根据分析出来的坐标数据，生成相应的Geometry  注：屏幕坐标转换成空间坐标
    * 参数：gID：所绘军标的组id； 默认使用this.svgCoords
    * 将数据写入 this.FeatureParts = {geoType: 'GeometryCollection', geoData: geodata}
    */
    buildGeom_old (gID, data = this.svgCoords) {
      const geodata = [] // 保存生成的每个图元元素
      // 清空之前的this.FeatureParts数据（删除原来绘制的军标）
      if (this.FeatureParts instanceof Array) {
        this.FeatureParts.splice(0, this.FeatureParts.length)
      }
      // console.log(data)
      if (data.length < 1) return // 没有数据时不做处理
      // 循环处理所有解析的数据
      for (let i = 0; i < data.length; i++) {
        // console.log(data[i])
        // let uID = Date.now()
        // data数据包含 {svg的path-原数据，和path上取得坐标}
        const { path, coords } = data[i]
        // console.log(path, coords)

        // 需要区分当前处理数据类型；文字需要特殊处理
        const dataType = path.tagName
        // console.log(dataType)
        // 生成文字处理数据
        if (dataType === 'text') {
          // console.log('文字处理暂无')
          const iText = path.innerHTML
          const d = coords[0]
          const geomData = []
          const c = this.$parent.iMap.getCoordinateFromPixel(d)
          geomData.push(c)
          geomData.push(coords[1])
          // 字体样式样式设置
          const iFont = path.getAttribute('font-family')
          const iSize = path.getAttribute('font-size')
          let pFont = 'normal '
          if (iSize) {
            pFont = pFont + iSize + 'px '
          } else {
            pFont = pFont + '14px '
          }
          if (iFont) {
            pFont = pFont + iFont
          } else {
            pFont = pFont + '微软雅黑'
          }
          const iStyle = {
            txt: iText,
            font: pFont,
            fill: '#000',
            stroke: null,
            width: 0
          }
          geodata.push({
            gid: gID,
            type: 'Point',
            data: geomData,
            style: iStyle
          })
        } else {
          // console.log(coords)
          // let iGeometry = null // 新生成的图元
          // let iStyle = null // 图元所对应的样式
          // 如果第一个和最后一个坐标一致，视为闭口多边形;没有填充色时，视为多边形线LineString
          if (coords[0][0] === coords[coords.length - 1][0] && coords[0][1] === coords[coords.length - 1][1]) {
            // 将屏幕坐标转换为地理坐标
            const geomData = coords.map(d => {
              // 本模块作为功能模块，不保存map对象，直接调用父组件map
              const c = this.$parent.iMap.getCoordinateFromPixel(d)
              return [c[0], c[1]]
            })

            // iFeature.setStyle(iStyle)
            const iStyle = {
              fill: this.svgCoords[i].path.getAttribute('fill'),
              stroke: this.svgCoords[i].path.getAttribute('stroke'),
              width: this.svgCoords[i].path.getAttribute('stroke-width')
            }
            geodata.push({
              gid: gID,
              type: 'polygon',
              data: [geomData],
              style: iStyle
            })
          } else {
            // 屏幕坐标转换为地理坐标
            const geomData = coords.map(d => {
              // 本模块作为功能模块，不保存map对象，直接调用父组件map
              const c = this.$parent.iMap.getCoordinateFromPixel(d)
              return [c[0], c[1]]
            })
            // console.log(geomData)
            // 获取样式
            const iStyle = {
              fill: this.svgCoords[i].path.getAttribute('fill'),
              stroke: this.svgCoords[i].path.getAttribute('stroke'),
              width: this.svgCoords[i].path.getAttribute('stroke-width')
            }
            geodata.push({
              gid: gID,
              type: 'linestring',
              data: geomData,
              style: iStyle
            })
          }
        } // if-else结束
        // this.FeatureParts.push(iFeature)
        this.FeatureParts = { geoType: 'GeometryCollection', geoData: geodata }
        // console.log(this.FeatureParts)
      }
    },
    // 添加文字旋转信息
    buildGeom (gID, data = this.svgCoords) {
      const geodata = [] // 保存生成的每个图元元素
      // 清空之前的this.FeatureParts数据（删除原来绘制的军标）
      if (this.FeatureParts instanceof Array) {
        this.FeatureParts.splice(0, this.FeatureParts.length)
      }
      // console.log(data)
      if (data.length < 1) return // 没有数据时不做处理
      // 循环处理所有解析的数据
      for (let i = 0; i < data.length; i++) {
        // console.log(data[i])
        // let uID = Date.now()
        // data数据包含 {svg的path-原数据，和path上取得坐标}
        const { path, coords } = data[i]
        // console.log(path, coords)

        // 需要区分当前处理数据类型；文字需要特殊处理
        const dataType = path.tagName
        // console.log(dataType)
        // 生成文字处理数据
        if (dataType === 'text') {
          // console.log('文字处理暂无')
          const iText = path.innerHTML
          const d = coords[0]
          const txtRot = coords[1][1] // 文本的坐标中[[文字坐标x，y]，[scale，rotate]]
          const geomData = []
          const c = this.$parent.iMap.getCoordinateFromPixel(d)
          geomData.push(c)
          geomData.push(coords[1])
          // 字体样式样式设置
          const iFont = path.getAttribute('font-family')
          const iSize = path.getAttribute('font-size')
          let pFont = 'normal '
          if (iSize) {
            pFont = pFont + iSize + 'px '
          } else {
            pFont = pFont + '14px '
          }
          if (iFont) {
            pFont = pFont + iFont
          } else {
            pFont = pFont + '微软雅黑'
          }
          const iStyle = {
            txt: iText,
            font: pFont,
            fill: '#000',
            rotate: txtRot,
            stroke: null,
            width: 0
          }
          geodata.push({
            gid: gID,
            type: 'Point',
            data: geomData,
            style: iStyle
          })
        } else {
          // console.log(coords)
          // let iGeometry = null // 新生成的图元
          // let iStyle = null // 图元所对应的样式
          // 如果第一个和最后一个坐标一致，视为闭口多边形;没有填充色时，视为多边形线LineString
          if (coords[0][0] === coords[coords.length - 1][0] && coords[0][1] === coords[coords.length - 1][1]) {
            // 将屏幕坐标转换为地理坐标
            const geomData = coords.map(d => {
              // 本模块作为功能模块，不保存map对象，直接调用父组件map
              const c = this.$parent.iMap.getCoordinateFromPixel(d)
              return [c[0], c[1]]
            })

            // iFeature.setStyle(iStyle)
            const iStyle = {
              fill: this.svgCoords[i].path.getAttribute('fill'),
              stroke: this.svgCoords[i].path.getAttribute('stroke'),
              width: this.svgCoords[i].path.getAttribute('stroke-width')
            }
            geodata.push({
              gid: gID,
              type: 'polygon',
              data: [geomData],
              style: iStyle
            })
          } else {
            // 屏幕坐标转换为地理坐标
            const geomData = coords.map(d => {
              // 本模块作为功能模块，不保存map对象，直接调用父组件map
              const c = this.$parent.iMap.getCoordinateFromPixel(d)
              return [c[0], c[1]]
            })
            // console.log(geomData)
            // 获取样式
            const iStyle = {
              fill: this.svgCoords[i].path.getAttribute('fill'),
              stroke: this.svgCoords[i].path.getAttribute('stroke'),
              width: this.svgCoords[i].path.getAttribute('stroke-width')
            }
            geodata.push({
              gid: gID,
              type: 'linestring',
              data: geomData,
              style: iStyle
            })
          }
        } // if-else结束
        // this.FeatureParts.push(iFeature)
        this.FeatureParts = { geoType: 'GeometryCollection', geoData: geodata }
        // console.log(this.FeatureParts)
      }
    },
    /* Method：parseItem
    * 分析SVG每一条的数据
    * 参数：itemData:svg每个元素数据, translateX：移动x方向值, translateY：移动y方向值, centerPoint:SVG中心点坐标， scale：缩放因子, rotate：旋转, numPoints:分段数量（path,圆和椭圆分段数量）
    * 返回：新生成的图形屏幕坐标
    */
    parseItem (itemData, translateX, translateY, centerPoint, scale = 1, rotate = 0, numPoints = 20) {
      // let gStyle = null // 如果是组元素<g>保存他的样式信息
      // let tName = itemData.getName // 获取当前元素的标签
      // console.log(itemData, itemData.tagName)
      // console.log(itemData.getAttribute('fill'))
      // console.log(itemData.getAttribute('stroke'))
      // console.log(itemData.getAttribute('stroke-width'))
      const gFill = itemData.getAttribute('fill')
      const gStroke = itemData.getAttribute('stroke')
      const gStrokeWidth = itemData.getAttribute('stroke-width')
      // console.log('-----------------------------------------')
      // console.log(gFill, gStroke, gStrokeWidth)
      if (gFill || gStroke || gStrokeWidth) {
        this.gStyle = { fill: gFill, stroke: gStroke, 'stroke-width': gStrokeWidth }
      }
      // 按照类型再次分析
      for (let i = 0; i < itemData.childNodes.length; i++) {
        // console.log(i) // 当前索引
        // console.info(itemData.childNodes[i]) // 当前children引用
        // console.info(itemData.childNodes[i].tagName) // 当前children引用
        const tName = itemData.childNodes[i].tagName
        switch (tName) {
          case 'path': // 处理数据路径数据
            this.pathToCoords(itemData.childNodes[i],
              scale, // 缩放SCALE 1
              numPoints, // NUM_POINTS 路径分成点数；不同类型不同数量  ?20
              translateX,
              translateY,
              centerPoint, rotate)
            break
          case 'circle': // 处理圆形数据
            this.circleToCoords(itemData.childNodes[i],
              scale, // 缩放SCALE 1
              numPoints, // NUM_POINTS 路径分成点数；圆18个点
              translateX,
              translateY,
              centerPoint, rotate)
            break
          case 'ellipse': // 处理椭圆数据
            this.ellipseToCoords(itemData.childNodes[i],
              scale, // 缩放SCALE 1
              numPoints, // NUM_POINTS 路径分成点数；圆18个点
              translateX,
              translateY,
              centerPoint, rotate)
            break
          case 'polyline': // 处理多边形线数据
            this.polylineToCoords(itemData.childNodes[i],
              scale, // 缩放SCALE 1
              translateX,
              translateY,
              centerPoint, rotate)
            break
          case 'polygon': // 处理多边形数据
            this.polygonToCoords(itemData.childNodes[i],
              scale, // 缩放SCALE 1
              translateX,
              translateY,
              centerPoint, rotate)
            break
          case 'rect': // 处理矩形数据
            this.rectToCoords(itemData.childNodes[i],
              scale, // 缩放SCALE 1
              translateX,
              translateY,
              centerPoint, rotate)
            break
          case 'line': // 处理线段数据
            this.lineToCoords(itemData.childNodes[i],
              scale, // 缩放SCALE 1
              translateX,
              translateY,
              centerPoint, rotate)
            break
          case 'text': // 处理线段数据
            this.textToCoords(itemData.childNodes[i], scale, translateX, translateY, centerPoint, rotate) // this.t extToCoords(itemData.childNodes[i], scale, translateX, translateY)
            // this.testToCoords(svgRoot.childNodes[i],
            //   SCALE, // 缩放SCALE 1
            //   18, // NUM_POINTS 路径分成点数；圆18个点
            //   coordinates.x,
            //   coordinates.y)
            break
          case 'g': // 处理组数据
            this.parseItem(itemData.childNodes[i], translateX, translateY, centerPoint, scale, rotate, numPoints)
            break
        }
      }
      // 绘制完成后，将gStyle清空
      this.gStyle = null
    },
    /* Method：parseSVG(输入单个控制点模式)
    * 分析SVG数据，将个元素转换成屏幕坐标；范围在鼠标绘制区域
    * 参数：drawPointLs点坐标信息，typeId军标ID
    * 返回：新生成的图形屏幕坐标
    */
    parseSVG (drawPointLs, typeId) {
      console.log(typeId)
      let SCALE = 1 // 缩放因子,调用方法自动计算比率取得此因子--待
      let ROTATE = 0 // 旋转角度
      const NUM_POINTS = 50 // 路径分段数量
      const chkArr = ['CP', 'TL', 'TM', 'TR', 'LM', 'RM', 'BL', 'BM', 'BR'] // 校验数据；验证basePoint是否有效
      let basePoint = 'CP' // [tl,tm,tr,lm,rm,bl,bm,br,cp中心点] // 圆点的位置说明--注意：大写
      let coordinates = null

      // 清空svgCoords--保存所有构成SVG的点（屏幕坐标）
      this.svgCoords.splice(0, this.svgCoords.length)
      // 绘制点有效性检查
      if (!drawPointLs) return
      // 根据文件名称获取处理信息; 文件名格式：icon_BM_110201.svg
      const paramArr = typeId.split('_')
      // console.log(paramArr)
      if (paramArr.length > 2) { // 有三个以上元素时，使用第二个元素为中心点；出现多于元素--编号中有“下划线”
        basePoint = paramArr[1].toUpperCase()
        // console.log(paramArr[0], paramArr[1], paramArr[2])
      } else if (paramArr.length === 2) { // 文件名称中不包含中心点位置；使用默认值CP
        // console.log(paramArr[0], paramArr[1])
        basePoint = 'CP'
      } else if (paramArr.length === 1) { // 只有一个文件名称是，使用CP；经过上层筛选，不可能出现！
        // console.log(paramArr[0])
        basePoint = 'CP'
      } else {
        // 没有数据时返回
        return
      }
      // basePoint校验
      if (chkArr.indexOf(basePoint) === -1) {
        basePoint = 'CP'
      }

      // 鼠标绘制的有个点，为中心点（不同类型，可能中心位置不用，圆是中心，旗子是左下角-插旗点）
      const cp = drawPointLs[0]
      // console.log(cp)
      // 创建一个元素容器，用来添加svg数据
      const empty = document.createElement('div')
      empty.innerHTML = this.svgData.data
      // 获取svg内容数据
      const svgRoot = empty.querySelector('svg')
      if (drawPointLs.length > 1) {
        // 获取鼠标绘制点框选大小（默认首个点是中心点 返回{ width: w, height: h }）
        const WH = this.getDrawSize(drawPointLs)
        // 获取比例因子(x方向和y方向比较大的一个)
        SCALE = this.getScaleFactor(WH, svgRoot) // empty.querySelector('svg')
        // console.log(SCALE)
        ROTATE = this.getRotateFactor(drawPointLs)
        // console.log(ROTATE)
        coordinates = this.calculateCoords(cp, svgRoot, SCALE, basePoint) // empty.querySelector('svg')
        // console.log(cp, svgRoot, SCALE, basePoint)
      } else { //
        // 将svg数据提取出来计算，调用calculateCoords进行处理--计算左上角坐标
        // const coordinates = this.calculateCoords(cp, empty.querySelector('svg'), SCALE)
        const WH = this.getUnitSize(drawPointLs, basePoint, this.mapUnit) // 根据给定尺寸（米），设置军标尺寸：默认左右各1000
        // SCALE = this.getScaleFactor(cp, WH, svgRoot) // 使用地理坐标方法
        SCALE = this.getScaleFactor(WH, svgRoot)
        ROTATE = this.getRotateFactor(drawPointLs)
        coordinates = this.calculateCoords(cp, svgRoot, SCALE, basePoint) // empty.querySelector('svg')
      }
      // 将信息回馈给父组件
      const ctrlPnt = drawPointLs.map(d => {
        // 转换成地理坐标（根据投影获取返回的坐标：如果不是3857而是4490后续可能有问题）
        const c = this.$parent.iMap.getCoordinateFromPixel(d) // 4490返回的是经纬度[116.08994635036495, 40.28763959854017]
        // console.log(cp, c, coordinates)
        return [c[0], c[1]]
      })
      // typeId + String(new Date().getTime())
      // this.$parent.currPlot.id = String(new Date().getTime()) // 后面有更新，再次不做处理 （注释原因）
      this.$parent.currPlot.name = typeId // svg文件名称
      this.$parent.currPlot.cp = ctrlPnt // drawPointLs -- ctrlpoint控制点，包含中心点
      this.$parent.currPlot.scale = SCALE
      this.$parent.currPlot.rotate = ROTATE
      this.$parent.currPlot.color = this.$parent.currColor // 颜色
      this.$parent.currPlot.boxWH = null // 暂时不支持SVG
      this.$parent.currPlot.unit = this.mapUnit
      this.$parent.currPlot.attach = null
      // console.log(this.$parent.currPlot)
      // let svgRoot = empty.querySelector('svg')
      for (let i = 0; i < svgRoot.childNodes.length; i++) {
        // console.log(i) // 当前索引
        // console.info(svgRoot.childNodes[i]) // 当前children引用
        // console.info(svgRoot.childNodes[i].tagName) // 当前children引用
        const tName = svgRoot.childNodes[i].tagName
        switch (tName) {
          case 'path': // 处理数据路径数据
            this.pathToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              NUM_POINTS, // NUM_POINTS 路径分成点数；不同类型不同数量  ?20
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'circle': // 处理圆形数据
            this.circleToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              NUM_POINTS, // NUM_POINTS 路径分成点数；圆18个点
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'ellipse': // 处理椭圆数据
            this.ellipseToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              NUM_POINTS, // NUM_POINTS 路径分成点数；圆18个点
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'polyline': // 处理多边形线数据
            this.polylineToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'polygon': // 处理多边形数据
            this.polygonToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'rect': // 处理矩形数据
            this.rectToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'line': // 处理线段数据
            this.lineToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'text': // 处理文字数据
            this.textToCoords(svgRoot.childNodes[i], SCALE, coordinates.x, coordinates.y, cp, ROTATE) // this.t extToCoords(svgRoot.childNodes[i], SCALE, coordinates.x, coordinates.y)
            // this.testToCoords(svgRoot.childNodes[i],
            //   SCALE, // 缩放SCALE 1
            //   18, // NUM_POINTS 路径分成点数；圆18个点
            //   coordinates.x,
            //   coordinates.y)
            break
          case 'g': // 处理组数据
            this.parseItem(svgRoot.childNodes[i], coordinates.x, coordinates.y, cp, SCALE, ROTATE, NUM_POINTS)
            break
        }
      }
    },

    /* Method：getFeature
    * 绘制军标，得到相应的feature坐标点；总的绘制接口点（main）
    * 参数：drawPointLs点坐标信息，drawType绘制军标类型，typeId军标ID（矢量svg_id），地图iMap
    * 返回：
    */
    getFeature (drawPointLs, drawType, typeId, iMap) {
      // 这里的drawPointLs是鼠标点击地图所获得的坐标（转成的屏幕坐标）
      let tID = null
      // let geodata = []
      // if (!drawLayerVue) return null
      // 屏幕坐标列表，保存通过绘制点计算得来的svg
      let secPoint = null
      // console.log(drawType, typeId)
      // let sPath = null
      switch (drawType) {
        case 'icon':
          // 调用绘制固定图标
          this.parseSVG(drawPointLs, typeId) // 解析svg数据，将数据写入到svgCoords中，以便下面生成Feature
          console.log(this.svgCoords)
          // 获取时间标签
          // tID = String(new Date().getTime())  // 获取时间标签
          tID = 'icon_' + String(new Date().getTime())
          this.$parent.currPlot.id = tID // 更新当前军标的组ID
          this.buildGeom(tID) // 数据格式{geoType:xx,geoData[{gid,type,data,style}{gid,type,data,style}]
          // console.log(this.FeatureParts)
          // this.buildFeature(tID)
          // 获取icon的第二控制点;注意要使用地理坐标！，所以在buildGeom将屏幕坐标转换成地理坐标后使用--可能需要添加坐标转换
          secPoint = this.getSecondCoord(this.$parent.currPlot) // 返回对象{x:123, y:456}
          this.$parent.currPlot.cp.push([secPoint.x, secPoint.y])
          // console.log(secPoint)
          break
        // 有方向军标
        case 'dire':
          // 调用绘制方向图标
          // 由两点控制大小与方向--生成数据写入到this.svgCoords
          this.parseSVG(drawPointLs, typeId) // 解析svg数据，将数据写入到svgCoords中，以便下面生成Feature
          // console.log(this.svgCoords)
          // tID = String(new Date().getTime()) // 获取时间标签
          tID = 'dire_' + String(new Date().getTime()) // 获取时间标签
          this.$parent.currPlot.id = tID // 更新当前军标的组ID
          // 数据格式{geoType:xx,geoData[{gid,type,data,style}{gid,type,data,style}]
          this.buildGeom(tID)
          break
        case 'ddir':
          // 调用绘制方向图标
          // 由两点控制大小与方向--生成数据写入到this.svgCoords
          this.parseSVG(drawPointLs, typeId) // 解析svg数据，将数据写入到svgCoords中，以便下面生成Feature
          tID = 'ddir_' + String(new Date().getTime()) // 获取时间标签
          this.$parent.currPlot.id = tID // 更新当前军标的组ID
          // 数据格式{geoType:xx,geoData[{gid,type,data,style}{gid,type,data,style}]
          this.buildGeom(tID)
          break
        default:
          console.log('other')
      }
      return this.FeatureParts // 返回新建的对象列表
    },

    /* Method：getFeature4Sol
    * 绘制军标，得到相应的feature坐标点；总的绘制接口点（main）-- 为了方案添加的-指定了军标ID
    * 参数：sID:方案侧提供的id； drawPointLs点坐标信息，drawType绘制军标类型，typeId军标ID（矢量svg_id），地图iMap
    * 返回：
    */
    getFeature4Sol (sID, drawPointLs, drawType, typeId, iMap) {
      // 这里的drawPointLs是鼠标点击地图所获得的坐标（转成的屏幕坐标）
      let tID = null
      // let geodata = []
      // if (!drawLayerVue) return null
      // 屏幕坐标列表，保存通过绘制点计算得来的svg
      let secPoint = null
      // console.log(drawType, typeId)
      // let sPath = null
      switch (drawType) {
        case 'icon':
          // 调用绘制固定图标
          this.parseSVG(drawPointLs, typeId) // 解析svg数据，将数据写入到svgCoords中，以便下面生成Feature
          console.log(this.svgCoords)
          // 获取时间标签
          // tID = String(new Date().getTime())  // 获取时间标签
          if (sID) {
            tID = sID
          } else {
            tID = 'icon_' + String(new Date().getTime())
          }
          // tID = 'icon_' + String(new Date().getTime())
          this.$parent.currPlot.id = tID // 更新当前军标的组ID
          this.buildGeom(tID) // 数据格式{geoType:xx,geoData[{gid,type,data,style}{gid,type,data,style}]
          // console.log(this.FeatureParts)
          // this.buildFeature(tID)
          // 获取icon的第二控制点;注意要使用地理坐标！，所以在buildGeom将屏幕坐标转换成地理坐标后使用--可能需要添加坐标转换
          secPoint = this.getSecondCoord(this.$parent.currPlot) // 返回对象{x:123, y:456}
          this.$parent.currPlot.cp.push([secPoint.x, secPoint.y])
          // console.log(secPoint)
          break
        // 有方向军标
        case 'dire':
          // 调用绘制方向图标
          // 由两点控制大小与方向--生成数据写入到this.svgCoords
          this.parseSVG(drawPointLs, typeId) // 解析svg数据，将数据写入到svgCoords中，以便下面生成Feature
          // console.log(this.svgCoords)
          // tID = String(new Date().getTime()) // 获取时间标签
          if (sID) {
            tID = sID
          } else {
            tID = 'dire_' + String(new Date().getTime())
          }
          // tID = 'dire_' + String(new Date().getTime()) // 获取时间标签
          this.$parent.currPlot.id = tID // 更新当前军标的组ID
          // 数据格式{geoType:xx,geoData[{gid,type,data,style}{gid,type,data,style}]
          this.buildGeom(tID)
          break
        case 'ddir':
          // 调用绘制方向图标
          // 由两点控制大小与方向--生成数据写入到this.svgCoords
          this.parseSVG(drawPointLs, typeId) // 解析svg数据，将数据写入到svgCoords中，以便下面生成Feature
          // tID = 'ddir_' + String(new Date().getTime()) // 获取时间标签
          if (sID) {
            tID = sID
          } else {
            tID = 'ddir_' + String(new Date().getTime())
          }
          this.$parent.currPlot.id = tID // 更新当前军标的组ID
          // 数据格式{geoType:xx,geoData[{gid,type,data,style}{gid,type,data,style}]
          this.buildGeom(tID)
          break
        default:
          console.log('other')
      }
      return this.FeatureParts // 返回新建的对象列表
    },

    /* Method：createSVGPlot
    * 根据SVG军标数据生成军标
    * 参数：plotData军标信息
    * 返回：drawPointLs点坐标信息，drawType绘制军标类型，typeId军标ID（矢量svg_id），地图iMap
    */
    createSVGPlot (plotData) {
      const tID = plotData.id // 组ID
      const drawType = tID.substr(0, 4) // 军标类型
      // console.log(plotData.cp)
      // 这里使用屏幕坐标绘制
      const ctrlPnt = plotData.cp.map(d => {
        // 转换成屏幕坐标
        const c = this.$parent.iMap.getPixelFromCoordinate(d)
        return [c[0], c[1]]
      })
      // console.log(ctrlPnt)

      switch (drawType) {
        case 'icon':
          // 调用绘制固定图标
          // this.updatePlot(ctrlPnt, plotData.name, plotData.scale ) // 解析svg数据，将数据写入到svgCoords中，以便下面生成Feature ;plotData.rotate icon 为0
          this.updateSVGPlot(ctrlPnt, plotData.name, false)
          this.buildGeom(tID) // 数据格式{geoType:xx,geoData[{gid,type,data,style}{gid,type,data,style}]
          // console.log(this.FeatureParts)
          // this.buildFeature(tID)
          break
        // 有方向军标
        case 'dire':
        case 'ddir':
          // 调用绘制固定图标
          // this.updatePlot(ctrlPnt, plotData.name, plotData.scale, plotData.rotate) // 解析svg数据，将数据写入到svgCoords中，以便下面生成Feature
          this.updateSVGPlot(ctrlPnt, plotData.name)
          this.buildGeom(tID) // 数据格式{geoType:xx,geoData[{gid,type,data,style}{gid,type,data,style}]
          // console.log(this.FeatureParts)
          // this.buildFeature(tID)
          break
        default:
          console.log('other')
      }
      return this.FeatureParts // 返回新建的对象列表
    },
    // 根据plotData更新军标(如果根据plot记录的scale是不同级别产生的比率，所以不能使用；--有问题！作废！)
    // 参数 drawPointLs：控制点, typeId 军标ID或名称, SCALE = 1 缩放, ROTATE = 0 旋转
    updatePlot (drawPointLs, typeId, SCALE = 1, ROTATE = 0) {
      console.log(SCALE)
      // let SCALE = 1 // 缩放因子,调用方法自动计算比率取得此因子--待
      // let ROTATE = 0 // 旋转角度
      const NUM_POINTS = 50 // 路径分段数量
      const chkArr = ['CP', 'TL', 'TM', 'TR', 'LM', 'RM', 'BL', 'BM', 'BR'] // 校验数据；验证basePoint是否有效
      let basePoint = 'CP' // [tl,tm,tr,lm,rm,bl,bm,br,cp中心点] // 圆点的位置说明--注意：大写
      let coordinates = null

      // 清空svgCoords--保存所有构成SVG的点（屏幕坐标）
      this.svgCoords.splice(0, this.svgCoords.length)
      // 绘制点有效性检查
      if (!drawPointLs) return
      // 根据文件名称获取处理信息; 文件名格式：icon_BM_110201.svg
      const paramArr = typeId.split('_')
      // console.log(paramArr)
      if (paramArr.length > 2) { // 有三个以上元素时，使用第二个元素为中心点；出现多于元素--编号中有“下划线”
        basePoint = paramArr[1].toUpperCase()
        // console.log(paramArr[0], paramArr[1], paramArr[2])
      } else if (paramArr.length === 2) { // 文件名称中不包含中心点位置；使用默认值CP
        // console.log(paramArr[0], paramArr[1])
        basePoint = 'CP'
      } else if (paramArr.length === 1) { // 只有一个文件名称是，使用CP；经过上层筛选，不可能出现！
        // console.log(paramArr[0])
        basePoint = 'CP'
      } else {
        // 没有数据时返回
        return
      }
      // basePoint校验
      if (chkArr.indexOf(basePoint) === -1) {
        basePoint = 'CP'
      }

      // 鼠标绘制的首个点，为中心点（不同类型，可能中心位置不用，圆是中心，旗子是左下角-插旗点）
      const cp = drawPointLs[0]
      // console.log(cp)
      // 创建一个元素容器，用来添加svg数据
      const empty = document.createElement('div')
      empty.innerHTML = this.svgData.data
      // 获取svg内容数据
      const svgRoot = empty.querySelector('svg')
      coordinates = this.calculateCoords(cp, svgRoot, SCALE, basePoint) // empty.querySelector('svg')
      // console.log(cp, svgRoot, SCALE, basePoint)

      // 分析数据
      for (let i = 0; i < svgRoot.childNodes.length; i++) {
        // console.log(i) // 当前索引
        // console.info(svgRoot.childNodes[i]) // 当前children引用
        // console.info(svgRoot.childNodes[i].tagName) // 当前children引用
        const tName = svgRoot.childNodes[i].tagName
        switch (tName) {
          case 'path': // 处理数据路径数据
            this.pathToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              NUM_POINTS, // NUM_POINTS 路径分成点数；不同类型不同数量  ?20
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'circle': // 处理圆形数据
            this.circleToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              NUM_POINTS, // NUM_POINTS 路径分成点数；圆18个点
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'ellipse': // 处理椭圆数据
            this.ellipseToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              NUM_POINTS, // NUM_POINTS 路径分成点数；圆18个点
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'polyline': // 处理多边形线数据
            this.polylineToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'polygon': // 处理多边形数据
            this.polygonToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'rect': // 处理矩形数据
            this.rectToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'line': // 处理线段数据
            this.lineToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'text': // 处理文字数据
            this.textToCoords(svgRoot.childNodes[i], SCALE, coordinates.x, coordinates.y, cp, ROTATE) // this.t extToCoords(svgRoot.childNodes[i], SCALE, coordinates.x, coordinates.y)
            // this.testToCoords(svgRoot.childNodes[i],
            //   SCALE, // 缩放SCALE 1
            //   18, // NUM_POINTS 路径分成点数；圆18个点
            //   coordinates.x,
            //   coordinates.y)
            break
          case 'g': // 处理组数据
            this.parseItem(svgRoot.childNodes[i], coordinates.x, coordinates.y, cp, SCALE, ROTATE, NUM_POINTS)
            break
        }
      }
    },
    // 绘制需要重新计算scale！替换updatePlot方法
    // 参数 drawPointLs: 军标控制点数组; typeID:军标的ID(用来获取质心)；enableRotate：是否启用旋转（icon不使用旋转）
    updateSVGPlot (drawPointLs, typeId, enableRotate = true) {
      // console.log(drawPointLs, typeId)
      let SCALE = 1 // 缩放因子,调用方法自动计算比率取得此因子--待
      let ROTATE = 0 // 旋转角度
      const NUM_POINTS = 50 // 路径分段数量
      const chkArr = ['CP', 'TL', 'TM', 'TR', 'LM', 'RM', 'BL', 'BM', 'BR'] // 校验数据；验证basePoint是否有效
      let basePoint = 'CP' // [tl,tm,tr,lm,rm,bl,bm,br,cp中心点] // 圆点的位置说明--注意：大写
      let coordinates = null

      // 清空svgCoords--保存所有构成SVG的点（屏幕坐标）
      this.svgCoords.splice(0, this.svgCoords.length)
      // 绘制点有效性检查
      if (!drawPointLs) return
      // 根据文件名称获取处理信息; 文件名格式：icon_BM_110201.svg
      const paramArr = typeId.split('_')
      // console.log(paramArr)
      if (paramArr.length > 2) { // 有三个以上元素时，使用第二个元素为中心点；出现多于元素--编号中有“下划线”
        basePoint = paramArr[1].toUpperCase()
        // console.log(paramArr[0], paramArr[1], paramArr[2])
      } else if (paramArr.length === 2) { // 文件名称中不包含中心点位置；使用默认值CP
        // console.log(paramArr[0], paramArr[1])
        basePoint = 'CP'
      } else if (paramArr.length === 1) { // 只有一个文件名称是，使用CP；经过上层筛选，不可能出现！
        // console.log(paramArr[0])
        basePoint = 'CP'
      } else {
        // 没有数据时返回
        return
      }
      // basePoint校验
      if (chkArr.indexOf(basePoint) === -1) {
        basePoint = 'CP'
      }

      // 鼠标绘制的有个点，为中心点（不同类型，可能中心位置不用，圆是中心，旗子是左下角-插旗点）
      const cp = drawPointLs[0]
      // console.log(cp)
      // 创建一个元素容器，用来添加svg数据
      const empty = document.createElement('div')
      empty.innerHTML = this.svgData.data
      // 获取svg内容数据
      const svgRoot = empty.querySelector('svg')
      if (drawPointLs.length > 1) {
        // 获取鼠标绘制点框选大小（默认首个点是中心点 返回{ width: w, height: h }）
        const WH = this.getDrawSize(drawPointLs)
        // 获取比例因子(x方向和y方向比较大的一个)
        SCALE = this.getScaleFactor(WH, svgRoot) // empty.querySelector('svg')
        // 如果启用旋转，计算旋转因子；
        if (enableRotate) {
          ROTATE = this.getRotateFactor(drawPointLs)
        }
        // console.log(ROTATE)
        coordinates = this.calculateCoords(cp, svgRoot, SCALE, basePoint) // empty.querySelector('svg')
        // console.log(cp, svgRoot, SCALE, basePoint)
      } else { //
        // 将svg数据提取出来计算，调用calculateCoords进行处理--计算左上角坐标
        // const coordinates = this.calculateCoords(cp, empty.querySelector('svg'), SCALE)
        const WH = this.getUnitSize(drawPointLs, basePoint, this.mapUnit) // 根据给定尺寸（米），设置军标尺寸：默认左右各1000
        // SCALE = this.getScaleFactor(cp, WH, svgRoot) // 使用地理坐标方法
        SCALE = this.getScaleFactor(WH, svgRoot)
        // ROTATE = this.getRotateFactor(drawPointLs)  // 只有一个控制点时，没有旋转 ROTATE为0
        coordinates = this.calculateCoords(cp, svgRoot, SCALE, basePoint) // empty.querySelector('svg')
      }
      // 分析数据
      for (let i = 0; i < svgRoot.childNodes.length; i++) {
        // console.log(i) // 当前索引
        // console.info(svgRoot.childNodes[i]) // 当前children引用
        // console.info(svgRoot.childNodes[i].tagName) // 当前children引用
        const tName = svgRoot.childNodes[i].tagName
        switch (tName) {
          case 'path': // 处理数据路径数据
            this.pathToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              NUM_POINTS, // NUM_POINTS 路径分成点数；不同类型不同数量  ?20
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'circle': // 处理圆形数据
            this.circleToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              NUM_POINTS, // NUM_POINTS 路径分成点数；圆18个点
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'ellipse': // 处理椭圆数据
            this.ellipseToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              NUM_POINTS, // NUM_POINTS 路径分成点数；圆18个点
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'polyline': // 处理多边形线数据
            this.polylineToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'polygon': // 处理多边形数据
            this.polygonToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'rect': // 处理矩形数据
            this.rectToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'line': // 处理线段数据
            this.lineToCoords(svgRoot.childNodes[i],
              SCALE, // 缩放SCALE 1
              coordinates.x,
              coordinates.y,
              cp, ROTATE)
            break
          case 'text': // 处理文字数据
            this.textToCoords(svgRoot.childNodes[i], SCALE, coordinates.x, coordinates.y, cp, ROTATE) // this.textToCoords(svgRoot.childNodes[i], SCALE, coordinates.x, coordinates.y)
            // this.testToCoords(svgRoot.childNodes[i],
            //   SCALE, // 缩放SCALE 1
            //   18, // NUM_POINTS 路径分成点数；圆18个点
            //   coordinates.x,
            //   coordinates.y)
            break
          case 'g': // 处理组数据
            this.parseItem(svgRoot.childNodes[i], coordinates.x, coordinates.y, cp, SCALE, ROTATE, NUM_POINTS)
            break
        }
      }
    }
    // go on
  }
}
</script>

<style scoped lang="scss"></style>
